<template>
  <div class="home">
    <el-container>
      <el-header>Header</el-header>
      <el-container>
        <el-aside width="200px">
          
          <el-row class="tac">
            <el-col :span="24">
              <el-menu
                default-active="2"
                class="el-menu-vertical-demo"
                @open="handleOpen"
                @close="handleClose"
                @select="handleSelect"
                background-color="#545c64"
                text-color="#fff"
                active-text-color="#ffd04b">

                <!-- 账号管理 -->
                <el-submenu index="1">
                  <template slot="title">
                    <i class="el-icon-location"></i>
                    <span>账号管理</span>
                  </template>
                  <el-menu-item-group>
                    <el-menu-item index="1-1">学生账号管理</el-menu-item>
                    <el-menu-item index="1-2">教师账号管理</el-menu-item>
                    <el-menu-item index="1-3">校长账号管理</el-menu-item>
                    <el-menu-item index="1-4">代理账号管理</el-menu-item>
                  </el-menu-item-group>
                </el-submenu>

                <!-- 课程管理 -->
                <el-submenu index="2">
                  <template slot="title">
                    <i class="el-icon-location"></i>
                    <span>课程管理</span>
                  </template>
                  <el-menu-item-group>
                    <el-menu-item index="2-1">教师课时费管理</el-menu-item>
                    <el-menu-item index="2-2">教师课程管理</el-menu-item>
                    <el-menu-item index="2-3">学生课表生成</el-menu-item>
                  </el-menu-item-group>
                </el-submenu>

                <!-- 费用管理 -->
                <el-submenu index="3">
                  <template slot="title">
                    <i class="el-icon-location"></i>
                    <span>费用管理</span>
                  </template>
                  <el-menu-item-group>
                    <el-menu-item index="3-1">教师课时费管理</el-menu-item>
                    <el-menu-item index="3-2">学生课时费管理</el-menu-item>
                    <el-menu-item index="3-3">校长提成</el-menu-item>
                    <el-menu-item index="3-4">销售提成</el-menu-item>
                    <el-menu-item index="3-5">校长提成发放</el-menu-item>
                    <el-menu-item index="3-6">销售提成发放</el-menu-item>
                  </el-menu-item-group>
                </el-submenu>
                
                <!-- 教师管理 -->
                <el-submenu index="4">
                  <template slot="title">
                    <i class="el-icon-location"></i>
                    <span>教师管理</span>
                  </template>
                  <el-menu-item-group>
                    <el-menu-item index="4-1">录入照片</el-menu-item>
                    <el-menu-item index="4-2">录入介绍</el-menu-item>
                    <el-menu-item index="4-3">上传音频</el-menu-item>
                    <el-menu-item index="4-4">修改课时费</el-menu-item>
                  </el-menu-item-group>
                </el-submenu>

                <!-- 校长管理 -->
                <el-submenu index="5">
                  <template slot="title">
                    <i class="el-icon-location"></i>
                    <span>校长管理</span>
                  </template>
                  <el-menu-item-group>
                    <el-menu-item index="5-1">设置提成</el-menu-item>
                    <el-menu-item index="5-2">设置教师</el-menu-item>
                    <el-menu-item index="5-3">设置福利</el-menu-item>
                  </el-menu-item-group>
                </el-submenu>

                <!-- 代理管理 -->
                <el-submenu index="6">
                  <template slot="title">
                    <i class="el-icon-location"></i>
                    <span>代理管理</span>
                  </template>
                  <el-menu-item-group>
                    <el-menu-item index="6-1">设置提成</el-menu-item>
                    <el-menu-item index="6-2">设置教师</el-menu-item>
                    <el-menu-item index="6-3">设置福利</el-menu-item>
                  </el-menu-item-group>
                </el-submenu>

                <!-- 学生管理 -->
                <el-submenu index="7">
                  <template slot="title">
                    <i class="el-icon-location"></i>
                    <span>学生管理</span>
                  </template>
                  <el-menu-item-group>
                    <el-menu-item index="7-1">费用充值</el-menu-item>
                    <el-menu-item index="7-2">选择教师</el-menu-item>
                    <el-menu-item index="7-3">选择课时</el-menu-item>
                    <el-menu-item index="7-4">设置课时费</el-menu-item>
                    <el-menu-item index="7-5">生成课表</el-menu-item>
                    <el-menu-item index="7-6">调课</el-menu-item>
                  </el-menu-item-group>
                </el-submenu>

                
              </el-menu>
            </el-col>
          </el-row>

        </el-aside>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<style scoped>
.el-header, .el-footer {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
  }
  
  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    line-height: 200px;
  }
  
  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    line-height: 160px;
  }
  
  body > .el-container {
    margin-bottom: 40px;
  }

.el-table__header tr,
  .el-table__header th {
    padding: 0;
    height: 40px;
}
.el-table__body tr,
  .el-table__body td {
    padding: 0;
    height: 40px;
}
</style>

<script>
// @ is an alias to /src


export default {
  name: 'Home',
  components: {
  },
  methods: {
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      },
      handleSelect(key, keyPath) {
        console.log(key, keyPath);
        this.$router.push('/studentAccount');
      }
    }
}
</script>
